<template>
  <border
    class="park-service-system-inner"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <!--<div class="content-top">-->
        <!--<span class="title">服务项目数</span>-->
        <!--<div class="top-number">-->
          <!--<span v-for="(item, index) in message.serviceNumber" :key="index">{{item}}</span>-->
        <!--</div>-->
      <!--</div>-->
      <labeled-quantity messageTitle="服务项目数" :messageMsg="message.serviceNumber"></labeled-quantity>
      <div class="content-middle">
        <message v-for="(item, index) in message.messageName"
                 :key="index"
                 :messageImgSrc="message.messageImgSrc"
                 :messageNumber="message.messageNumber[index]"
                 :messageName="item"></message>
      </div>
      <div class="content-bottom">
        <div class="bottom-li" v-for="(item, index) in pieConfig.pieData" :key="index">
          <pie :ref="pieConfig.ref[index]"
               :isUseValue="pieConfig.isUseValue"
               :value="item"
               :pieLegend="pieConfig.legend[index]"
               :limitLength="pieConfig.limitLength"
               :pieType="pieType"
               :notOther="pieConfig.notOther"
               :labelShow="pieConfig.labelShow"
               :seriesRadius="seriesRadius"
               :dtottedLine="pieConfig.dtottedLine"
               :tooltipsUnit="pieConfig.pieUnit[index]"
               :isUseComputedLine="pieConfig.isUseComputedLine"></pie>
          <span class="pie-message">{{pieConfig.title[index]}}</span>
        </div>
        <div class="legend">
          <div class="legend-li" v-for="(item, index) in pieConfig.legend[0]" :key="index" :class="{'hide-legend-li': index > 5}">
            <div class="legend-li-content"  v-if="index < pieConfig.limitLength - 1">
              <i :style="{'background': pieConfig.pieColor[index]}"></i>
              <span>{{ item.length > 4 ? item.substring(0, 4) : item }}</span>
            </div>
            <div class="legend-li-content" v-else-if="index == pieConfig.limitLength - 1">
              <i :style="{'background': pieConfig.pieColor[index]}"></i>
              <span>{{ pieConfig.legend.length === 5 ?item.length > 4 ? item.substring(0, 4) : item : '其他' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Pie from './../components/Pie.vue'
import Message from './../components/Message.vue'
import LabeledQuantity from './../components/LabeledQuantity.vue'
export default {
  name: 'parkServiceSystemInner',
  components: {
    Border,
    Pie,
    Message,
    LabeledQuantity
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '园区服务体系',
        goPageUrl: ''
      },
      message: {
        serviceNumber: 0,
        messageName: ['本年订单量', '本年订单额（元）'],
        messageNumber: [0, 0],
        messageImgSrc: require('./../../assets/images/module/background/octagon230x87.png')
      },
      pieConfig: {
        legend: [[], [], []],
        pieColor: ['#e9e703', '#e8605e', '#19dc7c', '#319ced', '#fa9022', '#8c70f8', '#cadfea', '#f59233'],
        pieData: [[], [], []],
        limitLength: 5,
        notOther: 'notOther',
        isUseValue: true,
        labelShow: false,
        isUseComputedLine: true,
        dtottedLine: false,
        ref: ['ref1', 'ref2', 'ref3'],
        title: ['服务项目分布', '订单分布', '收入分布'],
        pieUnit: ['', '', '元']
      },
      apiData: {},
      refreshInterval: 0
    }
  },
  computed: {
    pieType () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? '' : 'default'
    },
    seriesRadius () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? [['15%', '50%'], ['5%', '10%'], ['55%', '56%'], ['62%', '63%'], ['69%', '70%']] : [['40%', '70%']]
    },
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.operationApi.businessServiceSummary({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            let data = res.data.data
            this.apiData = data
            this.message.serviceNumber = data.businessServiceNum
            this.message.messageNumber = [data.curYearNum, parseInt(data.curYearFee / 100)]
            if (!isRefresh) {
              this.handleData()
            }
          } else {
            this.apiData = {}
            this.message.serviceNumber = 0
            this.message.messageNumber = [0, 0]
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
        }, res => {
          this.apiData = {}
          this.message.serviceNumber = 0
          this.message.messageNumber = [0, 0]
          this.$parent.showTips('请求失败，点击确认继续刷新')
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let legend1 = []
      let legend2 = []
      let legend3 = []
      let pieData1 = []
      let pieData2 = []
      let pieData3 = []
      if (JSON.stringify(data) !== '{}') {
        data.businessServiceDistributed.forEach((item, index) => {
          legend1.push(item.name)
          pieData1.push(item.value)
          if (data.orderDistributed[index]) {
            legend2.push(data.orderDistributed[index].name)
            pieData2.push(data.orderDistributed[index].value)
          }
          if (data.incomeDistributed[index]) {
            legend3.push(data.incomeDistributed[index].name)
            pieData3.push(parseInt(data.incomeDistributed[index].value / 100))
          }
        })
      }
      this.pieConfig.legend = [legend1, legend2, legend3]
      this.pieConfig.pieData = [pieData1, pieData2, pieData3]
    },
    resizeChart () {
      this.$refs.ref1[0].resizeChart()
      this.$refs.ref2[0].resizeChart()
      this.$refs.ref3[0].resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.parkServiceSystemInnerTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.parkServiceSystemInnerTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.parkServiceSystemInnerTimer)
  }
}
</script>
<style lang="scss" scoped>
  .park-service-system-inner {
    .module-content {
      width: 100%;
      height: 100%;
      .labeled-quantity-content {
        width: 100%;
        padding-left: 52px;
        margin: 10px 0;
      }
      .content-middle {
        width: 100%;
        overflow: hidden;
        .message {
          width: calc(50% - 52px);
          float: left;
          margin: 0 0 10px 47px;
          &:nth-of-type(2), &:nth-of-type(4) {
            float: right;
            margin: 0 47px 10px 0;
          }
          &:nth-of-type(3), &:nth-of-type(4) {
            margin-bottom: 0;
          }
        }
      }
      .content-bottom {
        width: 100%;
        height: 50%;
        .legend {
          width: 100px;
          height: 100%;
          display: flex;
          align-items: center;
          align-content: center;
          justify-items: center;
          flex-wrap: wrap;
          float: left;
          padding-left: 10px;
          box-sizing: border-box;
          .legend-li {
            width: 100%;
            padding: 1px 0 1px 5px;
            overflow: hidden;
            text-align: left;
            &.hide-legend-li {
              display: none;
            }
            &:last-of-type {
              margin: 0;
            }
            i {
              display: block;
              float: left;
              width: 12px;
              height: 12px;
              vertical-align: top;
              margin: 1px 5px 0 0;
            }
            span {
              font-size: 12px;
              color: #A4B3C7;
              line-height: 14px;
              display: inline-block;
            }
          }
        }
        .bottom-li {
          width: calc((100% - 100px) / 3);
          height: 100%;
          float: left;
          position: relative;
          .pie {
            width: 100%;
            height: calc(100% - 24px);
          }
          .pie-message {
            position: absolute;
            text-align: center;
            width: 100%;
            bottom: 4px;
            display: block;
            height: 24px;
            line-height: 24px;
            color: #fff;
            font-size: 12px;
          }
        }
      }
    }
  }
  @media screen and (min-width: 1890px) {
    .park-service-system-inner {
      .module-content {
        .content-bottom {
          height: calc(100% - 150px);
          .legend {
            .legend-li {
              padding: 3px 0 3px 5px;
            }
          }
        }
      }
    }
  }
</style>
